<template>
	<div class="member-details">
		
		<transition name="fade">
			<view class="w100p h100p pos-fix pos-c z1000 member-details-alarm" v-show="isShow">
				
				<view class="bg-color-white w100p h100p overflow-scroll-y pos-relative">
					<span @click="closeAlarmBox" class="iconfont icon-left btn-back"></span>
					
					<!-- 轮播图 begin -->
					<view class="uni-margin-wrap">
						<swiper class="w750 h400" circular :indicator-dots="swiper.indicatorDots" :autoplay="swiper.autoplay" :interval="swiper.interval" :duration="swiper.duration">
							<swiper-item v-for="(item, index) in swiper.list">
								<view class="swiper-item swiper-item-1 uni-bg-red">
									<image style="width: 750rpx;" :src="item.img" mode="center"></image>
								</view>
							</swiper-item>
						</swiper>
					</view>
					<!-- 轮播图 end -->
					
					<view class="pd-lr20 info-box">
						<!-- 基本信息 begin -->
						<view class="mg-b20 profile">
							<view class="color-gray-6 f32 h80 lh80 mg-b10 info-cat-title-box">
								{{ AllFieldsData.profile.label }}
							</view>
							
							<view class="info-cat-content-box">
								
								<view class="clear mg-b10">
									<view class="f0 fl h50 lh50">
										<span class="color-blue f28 mg-r8 iconfont icon-male" v-if="AllFieldsData.profile.field.gender === 1"></span>
										<span class="color-pink f28 mg-r8 iconfont icon-female" v-if="AllFieldsData.profile.field.gender === 2"></span>
										<span class="color-gray-6 f28">{{ AllFieldsData.profile.field.nickName }}</span>
									</view>
									
									<view class="color-gray-5 f0 fr h50 lh50">
										<span class="f28" v-if="AllFieldsData.profile.field.status === 0">单身</span>
										<span class="f28" v-if="AllFieldsData.profile.field.status === 1">离异</span>
									</view>
								</view>
								
								<!-- 身份信息 begin -->
								<view class="clear mg-b10">
									
									<!-- 生日 begin -->
									<view class="f0 fl h50 lh50 mg-r60">
										<span class="color-light-red f30 mg-r5 iconfont icon-birthday"></span>
										<span class="color-gray-6 f28">{{ AllFieldsData.profile.field.birth }}</span>
									</view>
									<!-- 生日 end -->
									
									<!-- 星座 begin -->
									<view class="f0 fl h50 lh50 mg-r60">
										<span class="color-orange f30 mg-r5 iconfont"
										      :class="AllFieldsData.profile.field.zodiac.list[AllFieldsData.profile.field.zodiac.index].iconName"></span>
										<span class="color-gray-6 f28">{{ AllFieldsData.profile.field.zodiac.list[AllFieldsData.profile.field.zodiac.index].label }}</span>
									</view>
									<!-- 星座 end -->
									
									<!-- 身高 begin -->
									<view class="f0 fl h50 lh50 mg-r60">
										<span class="color-light-blue f30 mg-r5 iconfont icon-height"></span>
										<span class="color-gray-6 f28">{{ AllFieldsData.profile.field.height }}</span>
									</view>
									<!-- 身高 end -->
									
									<!-- 体重 begin -->
									<view class="f0 fl h50 lh50">
										<span class="color-light-green f30 mg-r5 iconfont icon-weight"></span>
										<span class="color-gray-6 f28">{{ AllFieldsData.profile.field.weight }}</span>
									</view>
									<!-- 体重 end -->
								</view>
								<!-- 身份信息 end -->
								
								<!-- 教育信息 begin -->
								<view class="clear mg-b10">
									<view class="f0 h50 lh50">
										<span class="color-green f30 mg-r5 iconfont icon-education"></span>
										<span class="color-gray-6 f28">{{ AllFieldsData.profile.field.university }}</span>
									</view>
								</view>
								<!-- 教育信息 end -->
								
								<!-- 现居 begin -->
								<view class="clear mg-b10">
									<view class="f0 h50 lh50">
										<span class="color-light-red f30 mg-r5 iconfont icon-location"></span>
										<span class="color-gray-6 f28">{{ AllFieldsData.profile.field.region }}</span>
									</view>
								</view>
								<!-- 现居 end -->
								
								<!-- 籍贯 begin -->
								<view class="clear">
									<view class="f0 h50 lh50">
										<span class="color-light-blue f30 mg-r5 iconfont icon-home_town"></span>
										<span class="color-gray-6 f28">{{ AllFieldsData.profile.field.homeTown }}</span>
									</view>
								</view>
								<!-- 籍贯 end -->
								
							</view>
						</view>
						<!-- 基本信息 end -->
						
						<!-- 生活信息 begin -->
						<view class="mg-b20 condition">
							<view class="color-gray-6 f32 h80 lh80 mg-b10 info-cat-title-box">
								{{ AllFieldsData.condition.label }}
							</view>
							
							<view class="info-cat-content-box">
								<view class="clear">
									<view class="fl w50p">
										<view class="f0 h60 lh60">
											<span class="color-blue f30 iconfont icon-car"></span>
										</view>
										<div class="f0 h60 lh60">
											<span class="color-orange f30 iconfont icon-cigarette"></span>
										</div>
										<div class="f0 h60 lh60">
											<span class="color-light-red f30 iconfont icon-monthly_salary"></span>
										</div>
									</view>
									<view class="fl w50p">
										<view class="f0 h60 lh60">
											<span class="color-purple f30 iconfont icon-apartment"></span>
										</view>
										<view class="f0 h60 lh60">
											<span class="color-green f30 iconfont icon-wine"></span>
										</view>
										<view class="f0 h60 lh60">
											<span class="color-red f30 iconfont icon-annual_salary"></span>
										</view>
									</view>
								</view>
							</view>
						</view>
						<!-- 生活信息 end -->
						
						<!-- 标签信息 begin -->
						<view class="mg-b20 tag-info">
							<view class="color-gray-6 f32 h80 lh80 mg-b10 info-cat-title-box">
								{{ AllFieldsData.tag.label }}
							</view>
							
							<div class="info-cat-content-box"></div>
						</view>
						<!-- 标签信息 end -->
						
						<!-- 个人简介 begin -->
						<view class="mg-b20 intro">
							<view class="color-gray-6 f32 h80 lh80 mg-b10 info-cat-title-box intro-title">
								{{ AllFieldsData.intro.label }}
							</view>
							
							<view class="color-gray-5 f26 lh50 pd-tb10 intro-content">
								{{ AllFieldsData.intro.content }}
							</view>
						</view>
						<!-- 个人简介 end -->
						
						<!-- 择偶标准 begin -->
						<view class="selection">
							<view class="color-gray-6 f32 h80 lh80 mg-b10 info-cat-title-box intro-title">
								{{ AllFieldsData.selection.label }}
							</view>
							<view class="color-gray-5 f26 lh50 pd-tb10 selection-content">
								{{ AllFieldsData.selection.content }}
							</view>
						</view>
						<!-- 择偶标准 end -->
					</view>
				</view>
			</view>
		</transition>
		
		<!--loading 动画 begin-->
		<transition name="el-fade-in">
			<loading ref="loading"></loading>
		</transition>
		<!-- loading 动画 end-->
		
	</div>
</template>

<script>
	export default {
		name: "member-details",
		
		data() {
			return {
				isShow: false,

				swiper: {
					indicatorDots: true, // 是否显示面板指示点
					indicatorColor: 'rgba(121, 111, 222, .5)',
					indicatorActiveColor: '#047ee8',
					autoplay: true,
					interval: 3000, // 自动播放间隔时长
					duration: 500, // 滑动动画时长,

					list: [
						{
							id: 1,
							img: '/static/image/mem/1.jpg',
							title: '宫水 三叶',
							url: '',
						},
						{
							id: 2,
							img: '/static/image/mem/2.jpg',
							title: '立花 泷',
							url: '',
						}
					]
				},
				
				AllFieldsData: {
					slide: {
						list: []
					},

					profile: {

						label: '基本信息',

						field: {
							id: 1,
							gender: 1, // 1：female，2：male
							nickName: '立花 泷',
							
							birth: '2000-10-27',
							height: 170,
							weight: 75,
							status: 0, // 0：单身，1：离异
							zodiac: {
								index: 8,
								list: [
									{ id: 0, label: '', iconName: '' },
									{ id: 1, label: '白羊座', iconName: 'icon-1Aries' },
									{ id: 2, label: '金牛座', iconName: 'icon-2Taurus' },
									{ id: 3, label: '双子座', iconName: 'icon-3Gemini' },
									{ id: 4, label: '巨蟹座', iconName: 'icon-4Cancer' },
									{ id: 5, label: '狮子座', iconName: 'icon-5Leo' },
									{ id: 6, label: '处女座', iconName: 'icon-6Virgo' },
									{ id: 7, label: '天秤座', iconName: 'icon-7Libra' },
									{ id: 8, label: '天蝎座', iconName: 'icon-8Scorpio' },
									{ id: 9, label: '射手座', iconName: 'icon-9Sagittarius' },
									{ id: 10, label: '摩羯座', iconName: 'icon-10Capricorn' },
									{ id: 11, label: '水瓶座', iconName: 'icon-11Aquarius' },
									{ id: 12, label: '双鱼座', iconName: 'icon-12Pisces' }
								]
							},
							university: '东京大学',
							region: '北京市 海淀区',
							homeTown: '京都'
						},
					},

					condition: {
						label: '生活信息',

						field: {
							car: false, // 车
							apartment: false, // 房
							smoke: 0, //  (0：从不，1：偶尔，2：经常)
							drink: 0, //  (0：从不，1：偶尔，2：经常)
							monthlySalary: 15000, // 月薪
							yearlySalary: 180000 // 年薪
						}

					},

					tag: {
						label: '标签信息',

						tags: {
							food: [],

							hobby: [],

							movie: [],

							emotion: [],

							travel: []
						}
					},

					intro: {
						label: '个人简介',
						content: '我是什么样的人我是什么样的人我是什么样的人我是什么样的人我是什么样的人我是什么样的人我是什么样的人我是什么样的人我是什么样的人我是什么样的人我是什么样的人我是什么样的人'
					},

					selection: {
						label: '择偶标准',
						content: '想找什么样的人想找什么样的人想找什么样的人想找什么样的人想找什么样的人想找什么样的人想找什么样的人想找什么样的人想找什么样的人想找什么样的人想找什么样的人想找什么样的人想找什么样的人想找什么样的人想找什么样的人'
					}
				}
			}
		},
		
		methods: {

			addSlideItem() {
				this.AllFieldsData.slide.list.push({
					img: '/static/images/mem/3.png',
					title: '宫水 三叶',
					url: '',
				})
			},
			
			/* ---------------------------------------- 数据初始化 begin ---------------------------------------- */
			resetAllData() {
				this.AllFieldsData.slide.list = [];
			},
			/* ---------------------------------------- 数据初始化 end ---------------------------------------- */
			
			/* ---------------------------------------- 窗口控制区 begin ---------------------------------------- */
			
			openAlarmBox() {
				this.resetAllData(); // 初始化

				this.$refs.loading.openLoading('正在读取用户数据'); // 打开loading动画
				setTimeout(() => {
					this.$refs.loading.closeLoading(); // 关闭loading动画
					
					this.AllFieldsData.slide.list = [
						{
							img: '/static/images/mem/1.jpg',
							title: '宫水 三叶',
							url: '',
						},
						{
							img: '/static/images/mem/2.jpg',
							title: '立花 泷',
							url: '',
						},
					];
					
					this.isShow  = true;
				}, 1000);
			},
			
			closeAlarmBox() {
				this.isShow  = false;
				this.resetAllData(); // 初始化
			}
			
			/* ---------------------------------------- 窗口控制区 end ---------------------------------------- */
			
			
		},
		
		mounted() {
			// let swiper = new Swiper('.swiper-container', {
			// 	spaceBetween: 30,
			// 	centeredSlides: true,
			// 	autoplay: {
			// 		delay: 3000,
			// 		disableOnInteraction: false, // 触碰之后自动播放不停止
			// 	},
			// 	loop : true, // 循环播放
			// 	pagination: {
			// 		el: '.swiper-pagination',
			// 		clickable: true,
			// 	},
			// 	navigation: {
			// 		nextEl: '.swiper-button-next',
			// 		prevEl: '.swiper-button-prev',
			// 	},
			// });
		}
	}
</script>

<style>
	
	.uni-margin-wrap {
		width: 750rpx;
		margin-bottom: 20rpx;
	}
	.swiper {
		height: 350rpx;
	}
	.swiper-item {
		display: block;
		height: 350rpx;
		line-height: 350rpx;
		text-align: center;
	}
	
	.swiper-item-1 { background: #f00; }
	.swiper-item-2 { background: #18cd6f; }
	.swiper-item-3 { background: #1792f2; }
	
	.swiper-list {
		margin-top: 40rpx;
		margin-bottom: 0;
	}
	.uni-common-mt{
		margin-top:60rpx;
		position:relative;
	}
	.info {
		position: absolute;
		right:20rpx;
	}
	.uni-padding-wrap {
		width:550rpx;
		padding:0 100rpx;
	}
	
	.info-cat-title-box { border-bottom: 1rpx solid #eee }
	
	
	
	.member-details .btn-back {
		background: rgba(63, 63, 63, 0.5);
		border-radius: 50%;
		color: #fff;
		font-size: 0.6rem;
		width: 1rem;
		height: 1rem;
		line-height: 1rem;
		text-align: center;
		position: absolute;
		top: 0.2rem;
		left: 0.2rem;
		z-index: 100;
	}
	
	.member-details-alarm { width: 750rpx; }
</style>
